<template>
  <div class="container">
        <questionsAdd  @list="getUserInfo" @newList="newList"></questionsAdd>
    <el-card class="box-card">
      <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">
            <!-- 全部精选组件 -->
     <questionsReuse :list="list" :listitem.sync="listitem" @remove="remove" :dialogFormVisible.sync="dialogFormVisible" :showExamination.sync="showExamination" @setListItem="getListItem"/>
        </el-tab-pane>
        <el-tab-pane label="待审核" name="second">
            <!-- 未审核精选组件 -->
             <questionsReuse :list="list1" :listitem.sync="listitem" @remove="remove" :dialogFormVisible.sync="dialogFormVisible" :showExamination.sync="showExamination" @setListItem="getListItem"/>
        </el-tab-pane>
        <el-tab-pane label="已通过" name="third">
            <!-- 已通过精选组件 -->
            <questionsReuse :list="list2" :listitem.sync="listitem" @remove="remove" :dialogFormVisible.sync="dialogFormVisible" :showExamination.sync="showExamination" @setListItem="getListItem"/>
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth">
            <!-- 已拒绝精选组件 -->
            <questionsReuse :list="list3" :listitem.sync="listitem" @remove="remove" :dialogFormVisible.sync="dialogFormVisible" :showExamination.sync="showExamination" @setListItem="getListItem"/>
        </el-tab-pane>
      </el-tabs>
<!-- 分页组件============================================================================================================================================================ -->
<el-row type="flex" justify="end" align="middle" style="height: 60px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="params.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="params.pagesize"
          layout=" prev, pager, next,sizes, jumper"
          :total="total"
        />
              </el-row>
<!-- 审核弹窗============================================================================================================================================================== -->
    <el-dialog title="题目审核" :visible.sync="dialogFormVisible" width="350px" >
       <el-radio v-model="radio" label="1">通过</el-radio>
        <el-radio v-model="radio" label="3">拒绝</el-radio>
       <div   class="dialogdiv">
     <el-input
       type="textarea"
       :rows="2"
       placeholder="请输入内容"
       v-model="textarea">
   </el-input></div>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取消</el-button>
    <el-button type="primary" @click="dialogFormVisibleEn">确定</el-button>
  </div>
</el-dialog>
<!-- 预览弹窗============================================================================================================================================================== -->
<AuditPreview :showExamination.sync="showExamination" :list="getListItemdata"></AuditPreview>
    </el-card>
  </div>
</template>

<script>
import { choice, remove, choiceCheck, auditOpinions } from '../../api/hmmm/questions'
import questionsReuse from '../components/questions-reuse.vue'
import AuditPreview from '../components/AuditPreview.vue'
import questionsAdd from '../components/questions-add.vue'
export default {
  components: {
    questionsReuse,
    AuditPreview,
    questionsAdd
  },
  data () {
    return {
      activeName: 'first',
      //   list: JSON.parse(localStorage.getItem('list')) || [], // 渲染的数据
      list: [],
      list1: [], // 未审核的数据
      list2: [], // 已通过的数据
      list3: [], // 已拒绝的数据
      showExamination: false, // 封装弹出显示隐藏 预览
      radio: '', // 审核弹窗单选
      dialogFormVisible: false, // 审核弹窗显示隐藏
      textarea: '', // 审核弹窗文本域
      listitem: [],
      getListItemdata: [],
      params: {
        page: 1, // 当前页码
        pagesize: 10, // 每页条数
        keyword: ''
      },
      total: 0, // 总数,
      number: {
        index: ''
      }
    }
  },
  created () {
    this.getUserInfo()
  },
  async mounted () {
    await this.getUserInfo()
  },
  methods: {
    handleClick (tab) {
    //   console.log('tab', tab.index)
      this.number.index = tab.index
      //   console.log(this.number.index)
      //   console.log('event', event)
      if (Number(tab.index) === 1) {
        this.list1 = this.list.filter(item => item.chkState === 0)
        // console.log(this.list1)
        this.getUserInfo()
      }
      if (Number(tab.index) === 2) {
        this.list2 = this.list.filter(item => item.chkState === 1)
        // console.log(this.list2)
        this.getUserInfo()
      }
      if (Number(tab.index) === 3) {
        this.list3 = this.list.filter(item => item.chkState === 2)
        // console.log(this.list3)
        this.getUserInfo()
      }
    },
    // 获取精选题库列表
    async getUserInfo () {
      const res = await choice({ ...this.params })
      //   console.log(res.data)
      this.total = res.data.counts
      this.list = res.data.items
    },
    // 审核弹窗确定后赋值
    async dialogFormVisibleEn () {
    //   console.log(this.listitem)
      if (this.radio === '1') {
        this.list.filter(item => item.id === this.listitem.id)[0].chkState = 1
      } else {
        this.list.filter(item => item.id === this.listitem.id)[0].chkState = 2
      }
      this.list.filter(item => item.id === this.listitem.id)[0].chkRemarks = this.textarea
      this.list.filter(item => item.id === this.listitem.id)[0].chkUser = '超级管理员'
      this.dialogFormVisible = false
      await choiceCheck(this.listitem) // 试题审核接口
      this.listitem.chkRemarks = this.textarea
      await auditOpinions(this.listitem) // 试题审核意见列表接口
    },
    // 删除
    async remove (item) {
    //   console.log('remove', id)
      try {
        const res = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        if (res === 'confirm') {
          await remove(item)
          await this.getUserInfo()
          await this.handleClick(this.number)
          return this.$message.success('删除成功')

        //   if (data.status === 200) {
        //     // this.number.num
        //     this.getUserInfo()
        //     this.handleClick(this.number)
        //   }
        }
      } catch (error) {
        console.log(error)
      }
    },
    getListItem (data) {
      this.getListItemdata = data
    //   console.log(this.getListItemdata)
    },
    // currentPage 改变时会触发--当前页
    handleCurrentChange (val) {
      this.params.page = val
      this.getUserInfo()
    },
    // pageSize 改变时会触发--每页条数
    handleSizeChange (val) {
    //   console.log(val)
      this.params.pagesize = val
      this.getUserInfo({ ...this.params })
    },
    async newList (value) {
    //   console.log(value)
      const { data } = await choice({ ...this.params, subjectID: value })
      // console.log("32132",res);
      this.list = data.items
      this.total = data.counts
    }
  }
}
</script>

<style scoped lang='less' >

</style>
